<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="test">{{ a }}</div>
    <div class="test01" v-html="rawHtml"></div>
    <div class="test02" v-bind:id="dynamicId">{{ dynamicValue }}</div>
    <div class="test03" v-bind:id="'dynamicId[' + dynamicId + ']'">
        {{ ok ? "YES" : "NO" }}
    </div>
</body>
<script type="text/javascript" src="dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        data: {
            a: 1
        },
        el: "#test",
        beforeCreate: function(){
            console.log("a [" + this.a + "] not be created.");
        },
        created: function(){
            console.log("a [" + this.a + "] has be created.");
        },
        beforeMount: function(){
            console.log("a [" + this.a + "] before mount.");
        },
        beforeDestroy: function(){
            console.log("a [" + this.a + "] not be destroy.");
        }
    });

    var vm01 = new Vue({
        data: {
            rawHtml: "<hr /> a <hr />"
        },
        el: ".test01"
    });

    var vm02 = new Vue({
        data: {
            dynamicId: "dynamicId-test02",
            dynamicValue: "dynamicValue"
        },
        el: ".test02"
    });

    var vm03 = new Vue({
        data: {
            dynamicId: "dynamicId-test03",
            ok: true
        },
        el: ".test03"
    });

</script>
</html>